import React, { Component } from 'react'
import { RouteComponentProps } from "react-router-dom"
import { connect } from "react-redux"
import { Vote } from "../../../types/vote"
interface Iprops extends RouteComponentProps {
    history: any,
    votelist: Vote[]
}
interface Istate {
    user: any,
    list: string
}
export class My extends Component<Iprops, Istate> {
    state = {
        user: localStorage.getItem('username'),
        list: ""
    }

    render() {
        this.props.votelist.forEach((item: Vote) => {
            for (let i = 0; i < item.voteUsers.length; i++) {
                if (item.voteUsers[i] === this.state.user) {
                    this.state.list += item.title + "   "
                }
            }
        })
        return (
            <div className="my-page wrap">
                {
                    this.state.user ?
                        <div className="user">
                            <dl>
                                <dt></dt>
                                <dd>
                                    <h4>用户：{this.state.user}</h4>
                                </dd>
                            </dl>
                        </div> :
                        <div className="user">
                            <dl>
                                <dt></dt>
                                <dd>
                                    <h4 onClick={()=>this.props.history.push('/login')}>登录</h4>
                        /
                        <h4 onClick={()=>this.props.history.push('/register')}>注册</h4>
                                </dd>
                            </dl>
                        </div>
                }
                <div className="voter">
                    <h3>我参加的=>>>>>>>>>></h3>
                    <span>项目:{this.state.list}</span>
                </div>
                <div className="btn" onClick={()=>this.props.history.push('/create')}>
                    创建投票项目
                </div>
            </div>
        )
    }
}

let statemapToProps = (state: any) => {
    return {
        votelist: state.vote.votelist
    }
}
let dispatchMapToProps = (dispatch: any) => {
    return {}
}
export default connect(statemapToProps, dispatchMapToProps)(My)
